<template>
  <div class="table_admin">
    <div class="head_title">
      <div class="logo_box">
        <img class="logo" src="@/assets/img/logo.png" alt="" />
        <div class="title">
          <span class="title_bg"> 中国建筑装饰协会 </span>
          <span class="title_sm"> 会员管理平台 </span>
        </div>
      </div>
    </div>
    <div class="w" style="margin: 30px auto">
      <el-card class="box-card">
        <div>
          <el-upload
            class="upload-demo"
            ref="uploadExcel"
            :action="action"
            :on-remove="handleRemoveExcel"
            :file-list="fileList"
            :auto-upload="false"
            :on-exceed="onExceedExcle"
            :limit="1"
            :on-success="onSuccessExcel"
            :headers="headers"
            accept=".xls,.xlsx"
          >
            <template #trigger>
              <el-button size="small" type="primary">选取excel文件</el-button>
            </template>
            <el-button
              style="margin-left: 10px"
              size="small"
              type="success"
              @click="submitUpload('uploadExcel')"
              >上传excel到服务器</el-button
            >
            <template #tip>
              <div class="el-upload__tip" style="color: #f56c6c">
                只能上传 .xls,.xlsx 文件，且只能上传一个
              </div>
            </template>
          </el-upload>
        </div>
        <div style="margin-top: 30px">
          <el-upload
            class="upload-demo"
            ref="uploadImg"
            :action="actionImg"
            :on-success="onSuccessImg"
            :on-remove="handleRemove"
            :file-list="fileListImg"
            :auto-upload="false"
            :headers="headers"
            accept=".png,.jpg"
            :multiple="true"
            :on-change="onChangeImg"
            name="files"
          >
            <template #trigger>
              <el-button size="small" type="primary">选取人物照片</el-button>
            </template>
            <el-button
              style="margin-left: 10px"
              size="small"
              type="success"
              @click="submitUpload('uploadImg')"
              >上传人物照片到服务器</el-button
            >
            <template #tip>
              <div class="el-upload__tip" style="color: #f56c6c">
                只能上传 .png,.jpg 文件 (图片名字必须为身份证号码)
              </div>
            </template>
          </el-upload>
        </div>
      </el-card>
      <el-card class="box-card">
        <div class="search_box">
          <div>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-edit"
              @click="handEdit"
              >修 改</el-button
            >
            <el-popconfirm title="确定删除吗？" @confirm="handDelete">
              <template #reference>
                <el-button size="small" type="danger" icon="el-icon-delete"
                  >删 除</el-button
                >
              </template>
            </el-popconfirm>
          </div>
          <div class="search_btn">
            <el-input v-model="userName" placeholder="姓名"></el-input>
            <el-input
              style="margin: 0 15px"
              v-model="certNum"
              placeholder="证书号"
            ></el-input>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-edit"
              @click="handSearch"
              >查 询</el-button
            >
            <el-button
              size="small"
              type="info"
              icon="el-icon-refresh-left"
              @click="handReset"
              >重 置</el-button
            >
          </div>
        </div>
        <el-table
          ref="multipleTable"
          border
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="姓名" prop="userName"> </el-table-column>
          <el-table-column prop="certNum" label="证书编号"> </el-table-column>
          <el-table-column prop="certTime" label="发证日期"> </el-table-column>
          <el-table-column prop="idCard" label="身份证号码"> </el-table-column>
          <el-table-column prop="sex" label="性别"> </el-table-column>
          <el-table-column label="证书查询">
            <template #default="scope">
              <el-button
                size="small"
                type="primary"
                icon="el-icon-thumb"
                @click="handSearchBook(scope.row.id)"
                >点击查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pages_box">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageBid.start"
            :page-sizes="[5, 10, 15]"
            :page-size="pageBid.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageBid.totalCount"
            background
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
    <el-dialog
      title="证书"
      v-model="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <UserImg :userInfo="userInfo" />
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
    <!-- //编辑 -->
    <EditMsg ref="editMsg" :id="detailsId" />
  </div>
</template>

<script>
import { getTable, getDelete, getCertByID } from "@/utils/apis";
import { BASE_URL } from "@/utils/config";
import UserImg from "@/components/UserImg";
import EditMsg from "@/components/EditMsg";
export default {
  components: {
    UserImg,
    EditMsg,
  },
  data() {
    return {
      action: BASE_URL + "/admin/uploadExcel",
      actionImg: BASE_URL + "/admin/uploadPhoto",
      fileList: [],
      userInfo: {},
      dialogVisible: false,
      fileListImg: [],
      userName: "",
      tableData: [],
      handImg: "",
      certNum: "",
      detailsId: 0,
      headers: {
        token: localStorage.getItem("token") || "",
        // application/json;charset=UTF-8
        // "Content-Type": "application/json;charset=UTF-8",
      },
      pageBid: {
        start: 1,
        limit: 10,
        totalCount: 0,
        tatalpage: 1,
      },
      ids: [],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
    },
    handEdit() {
      if (this.ids.length === 0 || this.ids.length > 1) {
        this.$message.warning(`请选择一条!`);
      } else {
        this.detailsId = this.ids[0];
        this.$refs.editMsg.editShow = true;
      }
    },
    async handDelete() {
      if (this.ids.length === 0) {
        this.$message.warning(`请选择至少一条!`);
      } else {
        await getDelete({ ids: this.ids.join(",") });
        this.init();
        this.$message.success("删除成功!");
      }
    },
    handleSelectionChange(val) {
      this.ids = val.map((item) => item.id);
      console.log(this.ids);
    },
    init() {
      getTable({
        page: this.pageBid.start,
        limit: this.pageBid.limit,
        certNum: this.certNum,
        certTime: "",
        createTime: 0,
        dept: "",
        handImg: "",
        idCard: "",
        job: "",
        passWord: "",
        sex: "",
        userName: this.userName,
      }).then((res) => {
        console.log(res);
        this.tableData = res.data;
        this.pageBid.totalCount = res.count;
      });
    },
    handReset() {
      this.certNum = "";
      this.userName = "";
      this.init();
    },
    handSearch() {
      this.init();
    },
    handleSizeChange(val) {
      this.pageBid.limit = val;
      this.init();
    },
    handleCurrentChange(val) {
      this.pageBid.start = val;
      this.init();
    },
    onExceedExcle() {
      this.$message.warning(`限制上传一个文件,请删除后从新选择!`);
    },
    onSuccessExcel(response, file, fileLis) {
      const { code } = response;
      const { message } = response;
      if (code != 200) {
        this.$message.warning(message);
        if (code == 405) {
          this.$router.replace("Login");
        }
      } else {
        this.$message.success(message);
        this.$refs.uploadExcel.clearFiles();
        this.init();
      }
    },
    onSuccessImg(response, file, fileLis) {
      const { code } = response;
      const { message } = response;
      if (code != 200) {
        this.$message.warning(message);
        if (code == 405) {
          this.$router.replace("Login");
        }
      } else {
        this.$message.success(message);
        this.$refs.uploadImg.clearFiles();
        this.init();
      }
    },
    async handSearchBook(id) {
      this.checkId = id;
      this.dialogVisible = true;
      const details = (await getCertByID({ id })).data;
      if (details.handImg) {
        details.photoUrl = `${BASE_URL}/userCert/photo?url=${details.handImg}`;
      }
      // if (details.certTime) {
      //   details.certTime = details.certTime.split(" ")[0];
      // }
      this.userInfo = details;
    },
    submitUpload(ref) {
      console.log(this.$refs[ref]);
      this.$refs[ref].submit();
    },

    handleRemoveExcel(file, fileList) {
      console.log(file, fileList);
      this.$message.success("移除成功!");
    },
    onChangeImg(file, fileLis) {
      console.log(fileLis, "filefilefilefile");
      const regIdNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      fileLis.forEach((item, index) => {
        const name = item.name.substring(0, item.name.length - 4);
        if (!regIdNo.test(name)) {
          this.$message.warning(
            `照片名字必须为身份证号码,已为您移除不规范图片!`
          );
          fileLis.splice(index, 1);
          return false;
        }
      });
    },
  },
};
</script>
<style  lang="scss" scope>
.table_admin {
  width: 100%;
  .pages_box {
    text-align: center;
    margin: 30px 0;
  }
  .search_box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .search_btn {
      display: flex;
    }
  }
  .head_title {
    background: linear-gradient(
      to bottom,
      rgba(117, 189, 209, 1) 0%,
      rgba(39, 124, 184, 1) 95%,
      rgba(39, 124, 184, 1) 100%
    );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#75bdd1', endColorstr='#277cb8', GradientType=0 );
    height: 130px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .logo_box {
      display: flex;
      justify-content: center;
      margin: 0;
      .logo {
        width: 80px;
        height: 80px;
        margin-right: 20px;
      }
      .title {
        color: #fff;
        .title_bg {
          font-size: 60px;
          font-weight: 600;
        }
        .title_sm {
          font-size: 30px;
        }
      }
    }
  }
}
</style>
